<!DOCTYPE html>
<html>
    <head>
        <!-- 加载样式及META信息 -->
        {include file="common/meta" /}

        {include file="common/vue" /}
        <script src="__CDN__/assets/addons/deerhome/js/topbar.js?v={$Think.config.site.version}"></script>
    </head>
    <body class="hold-transition {$Think.config.fastadmin.adminskin|default='skin-black-blue'} sidebar-mini {:$Think.cookie.sidebar_collapse?'sidebar-collapse':''} fixed {:$Think.config.fastadmin.multipletab?'multipletab':''} {:$Think.config.fastadmin.multiplenav?'multiplenav':''}" id="tabs">
        <div id="tabs_hide" class="hidden">{$menulist}</div>
        <div id="toptip" style="position: fixed;top:0px;width:600px;z-index:999;left: 50%;margin-left: -300px;" class="hide"><div></div></div>
        <div id="app">
        <template>
            <div class="deer_body" >
                <div class="deer_left_nav" :style="{height:bodyHeight+'px'}">
                    <div class="deer_left_nav_con_logo">
                        <img src="{$site.admin_logo}" style="width: 40px;"/>
                    </div>
                    <div class="deer_left_nav_con_list" id="deer_left_nav" :style="{height:(bodyHeight-70)+'px'}">
                        <div class="deer_left_nav_con_list_item" :class="{active:index==navActive}" v-for="(item,index) in navList" :key="index" @click="navClick(item,index)">
                            <i class="deer_nav_icon" :class="item.icon"></i>
                            <span>{{item.text}}</span>
                        </div>
                    </div>
                </div>
                <div class="deer_left_nav_son" v-if="showNavSon" :style="{height:bodyHeight+'px'}">
                    <h2 class="nav_son_title">{{navSonListTitle}}</h2>
                    <div class="deer_left_nav_son_list" :style="{height:(bodyHeight-90)+'px'}">
                        <div class="deer_left_nav_son_list_item" :class="{active:index==navSonActive}" v-for="(item,index) in navSonList" :key="index" @click="navSonClick(item,index)">
                            <span>{{item.text}}</span>
                        </div>
                    </div>
                </div>
                <div class="deer_mini_button" :style="{left:showNavSon?'180px':'52px'}" @click="showNavSon=!showNavSon" v-if="navSonList.length>0">
                    <el-tooltip class="item" effect="dark" :content="showNavSon?'收缩面板':'展开面板'" placement="right">
                        <i v-if="showNavSon" class="el-icon-arrow-left"></i>
                        <i v-else class="el-icon-arrow-right"></i>
                    </el-tooltip>
                </div>
                <div class="deer_body_con" :style="{height:bodyHeight+'px'}">
                    <div class="deer_top_fix">
                        <div class="deer_right_info">
                            <div style="margin-right:15px;"><a style="color: #606266;" @click="clearCache" href="javascript:;" >清除缓存</a></div>
                            <div class="user-info">
                                <el-dropdown @command="userBoxCommand">
                                    <div class="el-dropdown-link">
                                        <img src="{$admin.avatar|cdnurl|htmlentities}" class="user-image" alt="">
                                        <span class="hidden-xs">
                                            {$admin.nickname|htmlentities} 
                                            <i class="el-icon-arrow-down el-icon--right"></i>
                                        </span>
                                    </div>
                                    
                         
                                    <el-dropdown-menu slot="dropdown">
                                      <el-dropdown-item command="editPass"><i class="el-icon-unlock el-icon--right"></i> 修改密码</el-dropdown-item>
                                      <el-dropdown-item  command="logout"><i class="el-icon-switch-button el-icon--right"></i> 退出登录</el-dropdown-item>
                                    </el-dropdown-menu>
                                  </el-dropdown>
                             
                            </div>
                            <div class="hidden-xs">
                                <a href="#" data-toggle="fullscreen"><i class="fa fa-arrows-alt"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="deer_body_frame" :style="{height:(bodyHeight-50)+'px'}">
                        <iframe v-if="body_src" :src="body_src" onload="setLoadingHide()" frameborder="0" width="100%" height="100%"></iframe>
                    </div>
                </div>
            </div>

        </template>
        </div>
        <!-- 加载JS脚本 -->
        {include file="common/script" /}
<script>
let _format_url=function(url){
    url=url.replace('ref=addtabs','');
    if(url.substr(-1)=='?'){
        url=url.substr(0,url.length-1);
    }
    return url;
}
let _navs=[];
let _navs_tmp=[];
let _file=("{:url('s/s')}").replace('/s/s','');
(function(){
    $('#tabs_hide').children('li:not(.hidden)').each((i,e) => {
        let b={
                text:$(e).find('a').eq(0).text().trim(),
                icon:$(e).find('a').eq(0).find('i').attr('class'),
                url:_format_url($(e).find('a').eq(0).attr('href')),
                active:$(e).hasClass('active'),
                son:[]
            };
        $(e).children('.treeview-menu').children('li').each((i2,e2) => {
            let c=[];
            $(e2).find('.treeview-menu li').each((i3,e3) => {
                c.push({
                    text:$(e3).find('a').eq(0).find('span').eq(0).text().trim(),
                    icon:$(e3).find('a').eq(0).find('i').attr('class'),
                    url:_format_url($(e3).find('a').eq(0).attr('href')),
                    active:$(e3).hasClass('active')
                });
            });
            b.son.push({
                text:$(e2).find('a').eq(0).find('span').eq(0).text().trim(),
                icon:$(e2).find('a').eq(0).find('i').attr('class'),
                url:_format_url($(e2).find('a').eq(0).attr('href')),
                active:$(e).hasClass('active'),
                son:c
            });
        })
        _navs.push(b); 
    });
    _navs.forEach((e,i) => {
        if(e.text=="常规管理" || e.text=="权限管理"){
            return;
        }
        _navs_tmp=[..._navs_tmp, ...e.son];
    });
    
    let abc=[];
    _navs.forEach((e,i) => {
        if(e.text=="常规管理" || e.text=="权限管理"){
            abc=[...abc, ...e.son];
        }
    });
    _navs_tmp.push({
        text:"维护",
        icon:'iconfont icon-fuwu15',
        url:'',
        active:false,
        son:abc
    });

    topbar.config({
        barThickness : 5,
        shadowBlur   : 5,
        shadowColor  : 'rgba(0, 0, 0, .5)'
    })
})();
_navs=_navs_tmp;
var vm=new Vue({
    el: '#app',
    data: {
        bodyHeight:document.documentElement.clientHeight,
        navList:_navs,
        navActive:0,
        navSonActive:0,
        showNavSon:false,
        navSonListTitle:"",
        navSonList:[],
        body_src:''
    },
    created(){
        console.log(location.hash);
        this.body_src=this.navList[0].url;
        let hash=location.hash.replace('#','');
        if(hash){
            this.setNav(_file+hash);
        }else{
            this.body_src=this.navList[0].url;
        }
        
    },
    methods:{
        clearCache(){
            $.ajax({
                    url: 'ajax/wipecache',
                    dataType: 'json',
                    data: {type: 'all'},
                    cache: false,
                    success: function (ret) {
                        if (ret.hasOwnProperty("code")) {
                            var msg = ret.hasOwnProperty("msg") && ret.msg != "" ? ret.msg : "";
                            if (ret.code === 1) {
                                Toastr.success(msg ? msg : __('Wipe cache completed'));
                            } else {
                                Toastr.error(msg ? msg : __('Wipe cache failed'));
                            }
                        } else {
                            Toastr.error(__('Unknown data format'));
                        }
                    }, error: function () {
                        Toastr.error(__('Network error'));
                    }
                });
        },
        userBoxCommand(e){
            console.log(e);
            if(e=='editPass'){
                this.navActive=-1;
                this.showNavSon=false;
                this.body_src="{:url('general/profile')}";
                return;
            }
            
            Deer.ask("确定退出账号吗？", function () {
                location.href="{:url('index/logout')}";
            })
        },
        navSonClick(e,i){
            this.navSonActive=i;
            this.body_src=this.noCacheUrl(this.navSonList[this.navSonActive].url);
            this.setTitle(this.navSonList[this.navSonActive].text);
        },
        navClick(e,i){
            this.navActive=i;
            if(e.son.length>0){
                this.showNavSon=true;
                this.navSonListTitle=e.text;
                this.navSonList=e.son;
                this.navSonActive=0;
                this.body_src=this.navSonList[this.navSonActive].url;
                this.setTitle(this.navSonList[this.navSonActive].text);
                return;
            }
            this.showNavSon=false;
            this.navSonList=[];
            this.body_src=this.noCacheUrl(e.url);
            this.setTitle(e.text);
        },
        noCacheUrl(url){
            if(url.indexOf('?')==-1){
                return url+'?_='+Math.random();
            }else{
                return url+'&_='+Math.random();
            }
        },
        setNav(url){
            console.log('url',url);
            let url2=url.split('?')[0];
            _navs.forEach((e,i) => {
                if(e.url.split('?')[0]==url2){
                    this.navActive=i;
                    this.body_src=url;
                    this.setTitle(e.text);
                    return;
                }
                if(e.son.length==0){
                    return;
                }
                e.son.forEach((e2,i2) => {
                    if(e2.url.split('?')[0]==url2){
                        this.navActive=i;
                        this.navSonActive=i2;
                        this.showNavSon=true;
                        this.navSonListTitle=e.text;
                        this.navSonList=e.son;
                        this.body_src=url;
                        this.setTitle(e2.text);
                        return;
                    }
                })
            })
        },
        setTitle(s){
            document.title=s+" - {$site.name}";
            location.hash=this.body_src.replace(_file,'').replace(/[?|&]_=0\.(\d+)/,'');
            setLoadingShow();
        }
    }
});
function setNav(url){
    vm.setNav(url);
}
function setLoadingShow(){
    console.log('loading',topbar);
    topbar.show();
}
function setLoadingHide(){
    console.log('loading hide');
    topbar.hide();
}
window.onresize = function(){
    vm.bodyHeight=document.documentElement.clientHeight;
}
</script>
<style>
    body{
        overflow: hidden !important;
    }
    #toptip .alert .iconfont{
        line-height: 20px;
    }
    .deer_mini_button{
        -moz-box-align: center;
        -moz-box-pack: center;
        -webkit-align-items: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        cursor: pointer;
        display: -webkit-flex;
        display: -moz-box;
        display: flex;
        height: 60px;
        -webkit-justify-content: center;
        justify-content: center;
        padding: 0;
        position: fixed;
        left: 180px;
        top: 50%;
        -webkit-transform: translate3d(100%,-50%,0);
        -moz-transform: translate3d(100%,-50%,0);
        transform: translate3d(100%,-50%,0);
        -webkit-transition: opacity .16s ease;
        -o-transition: opacity .16s ease;
        -moz-transition: opacity .16s ease;
        transition: opacity .16s ease;
        width: 16px;
    }
    .deer_mini_button:hover {
        background-color: #ece2ff;
        color: #884ffb;
    }
    .deer_mini_button:hover i{
        color: #884ffb;
        font-size: 20px;
    }
    .deer_top_fix{
        height: 50px;
        width: 100%;
        background-color: #fff;
        box-shadow: 15px 0px 20px rgba(0, 21, 41, 0.08);
        position: relative;
        z-index: 9;
        /* background: linear-gradient(360deg, #f7e6ff 2.63671875%, #ffffff 100%) !important; */
    }
    .deer_body_frame{
        margin-top: 0px;
    }

    .deer_top_fix .deer_right_info{
       float: right;
       margin-right: 20px;
       height: 50px;
       display: flex;
       justify-content: center;
       align-items: center;
    }
    .user-info{
        margin-right: 20px;
    }
    .user-image{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
    .deer_body{
        display: flex;
    }
    .hidden{
        display: none;
    }
    .deer_body_con{
        flex:1;
    }
    .deer_left_nav{
        width: 70px;
        height: 100%;
        background-color: #fff;
    }
    .deer_left_nav_con_logo{
        width: 100%;
        height: 70px;
        text-align: center;
        line-height: 70px;
    }
    .deer_left_nav_con_logo img{
        width: 40px;
    }
    .deer_left_nav_con_list{
        display: flex;
        flex-direction: column;
    }
    .deer_left_nav_con_list_item{
        width: 60px;
        margin-left:5px;
        margin-right:5px;
        margin-bottom: 3px;
        height: 55px;
        padding:10px 0;
        text-align: center;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: 500;
        transition: all 0.3s ease-in-out;
    }
    .deer_left_nav_con_list_item.active,.deer_left_nav_con_list_item.active:hover{
        background-color: #ece2ff;
        color: #884ffb;
        border-radius: 10px;
    }
    .deer_left_nav_con_list_item:hover{
        background-color: #f2f2f2;
        color: #884ffb;
        border-radius: 10px;
    }
    .deer_nav_icon{
        width:40px;
        height: 27px;
        font-size: 20px;
    }
    .deer_left_nav_son{
        width: 130px;
        box-shadow: 0 0 3px #f2f2f2;
        background-color: #fff;
    }
    .nav_son_title{
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        color: #23272e;
        font-size: 18px;
        font-weight: 600;
        height: 56px;
        line-height: 26px;
        overflow: hidden;
        padding: 15px 24px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .deer_left_nav_son_list_item{
        width: 110px;
        height: 40px;
        padding:10px 0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        transition: all 0.3s linear;
        margin:10px;
    }
    .deer_left_nav_son_list_item span{
        margin-left: 10px;
        transition: all 0.3s linear;
    }
    .deer_left_nav_son_list_item.active span{
        margin-left: 0 !important;
    }
    .deer_left_nav_son_list_item.active,.deer_left_nav_son_list_item.active:hover{
        background-color: #ece2ff;
        color: #884ffb;
        border-radius: 10px;
        align-items: center;
    }
    .deer_left_nav_son_list_item:hover{
        color: #884ffb;
        background-color: #f2f2f2;
        border-radius: 10px;
    }
</style>

    </body>
</html>
